<template>
    <div>
        <top-bar></top-bar>
        <left-bar :datas='data'></left-bar>
        <div class="department">
            <div class="system">
                <home-bar :currentPage='currentPage'></home-bar>
                <div class="system-main">
                    <div class="main-position">
                        首页 > 员工管理 > 部门管理
                    </div>
                    <div class="main-height"></div>
                    <div class="main-mains">
                        <div class="main-top-nav">
                            <ul>
                                <router-link to="/employees" @click.native="addPath('/employees','员工管理')">
                                    <li>员工管理</li>
                                </router-link>
                                <router-link to="/departments" @click.native="addPath('/departments','员工管理')">
                                    <li class="active">部门管理</li>
                                </router-link>
                            </ul>
                        </div>
                        <div class="employee">
                            <div class="employee-return">
                                <router-link to="/departments" @click.native="addPath('/departments','员工管理')">
                                    <i class="el-icon-arrow-left"></i>
                                    <span>新增部门</span>
                                </router-link>
                            </div>
                            <div class="employee-add-mains">
                                <div class="employee-add-mains-top employee-add-mains-mar">部门信息</div>
                                <div class="employee-add-mains-tops">
                                    <div class="clear employee-add-mains-mar">
                                        <div class="fl">
                                            <span class="employee-add-txt">部门名称</span>
                                            <el-input v-model="name"></el-input>
                                        </div>
                                        <div class="fl">
                                            <span class="employee-add-txt">部门负责人</span>
                                            <el-input v-model="responsible "></el-input>
                                        </div>
                                    </div>
                                </div>
                                <div class="employee-add-mainss">
                                    <div class="employee-add-mainss-top">
                                        权限设置
                                    </div>
                                    <div class="employee-add-mainss-table">
                                        <div class="employee-add-mainss-table-top clear">
                                            <div class="fl " style="width:16%;">一级</div>
                                            <div class="fl " style="width:16%;">二级分类</div>
                                            <div class="fl" style="width:68%;">权限选择</div>
                                        </div>
                                        <div class="employee-add-mainss-table-con clear">
                                            <div v-for="(item,index) in dataLists" :key="index" class="clear table-cons">
                                                <div class="fl table-con1" :style="{width:'16%',height:item.list.length *36 +'px',lineHeight:item.list.length *36 +'px'}" v-if="item.list.length">
                                                    {{item.name}}
                                                </div>
                                                <div class="fl table-con1" :style="{width:'16%',height:'36px',lineHeight:'36px'}" v-else>{{item.name}}</div>
                                                <div class="fl table-con2" style="width:16%;">
                                                    <p class="center2" v-if="item.list.length==0">{{item.name}}</p>
                                                    <p class="center2" v-for="(items,index) in item.list" :key="index">{{items.name}}</p>
                                                </div>
                                                <div class="fl table-con3" style="width:68%;">
                                                    <div class="table-con3-cons" v-for="(items,index) in item.list" :key="index">
                                                        <span v-for="(itemss,index) in items.list" :key="index">
                                                                    <input  type="checkbox"  :data1=item.id  :data2=items.id  :name=items.name  :value=itemss.id>
                                                                    {{itemss.name}}
                                                            </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="employee-add-mainss-bto">
                                        <router-link to="/departments" @click.native="addPath('/departments','员工管理')">
                                            <span>取消</span>
                                        </router-link>
                                        <span @click="confirm()">确认</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import topBar from "../../public/top";
import leftBar from "../../public/left";
import homeBar from "../../public/homebar";
export default {
  components: {
    leftBar,
    topBar,
    homeBar
  },
  data() {
    return {
      data: "/employees",
      currentPage: {
        path: "/adddepartment",
        name: "员工管理"
      },
      checked: "",
      name: "",
      responsible: "",
      dataLists: []
    };
  },
  methods: {
    addPath(n1, n2) {
      //点击切换home-bar
      var obj = {};
      obj.n1 = n1;
      obj.n2 = n2;
      this.$store.commit("addPath", obj);
    },
    dataList() {
      let _this = this;
      _this
        .$http({
          url:
            _this.urls +
            "/who/Jurisdiction/getDataList/" +
            localStorage.getItem("uid") +
            "/" +
            localStorage.getItem("token"),
          method: "post",
          data: {
            searchKey: ""
          }
        })
        .then(function(res) {
          let data = res.data;
          if (data.code == "1") {
            _this.dataLists = data.data;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    confirm() {
      let _this = this;
      if (_this.name == "") {
        _this.$message.error("请输入部门名称");
        return false;
      }
      if (_this.responsible == "") {
        _this.$message.error("请输入部门负责人");
        return false;
      }
      let obj = document.getElementsByTagName("input");
      let ids = "";
      let id_one = [];
      let id_two = [];
      for (let k in obj) {
        if (obj[k].checked) {
          id_one.push(obj[k].getAttribute("data1"));
          id_two.push(obj[k].getAttribute("data2"));
          ids = ids + obj[k].value + ",";
        }
      }
      let id_one_new = Array.from(new Set(id_one));
      let id_two_new = Array.from(new Set(id_two));
      for (let i = 0; i < id_one_new.length; i++) {
        ids = ids + id_one_new[i] + ",";
      }
      for (let j = 0; j < id_two_new.length; j++) {
        ids = ids + id_two_new[j] + ",";
      }
      _this
        .$http({
          url:
            _this.urls +
            "/who/Department/add/" +
            localStorage.getItem("uid") +
            "/" +
            localStorage.getItem("token"),
          method: "post",
          data: {
            name: _this.name,
            principal: _this.responsible,
            jur_id: ids
          }
        })
        .then(function(res) {
          let data = res.data;
          if (data.code == "1") {
            _this.$message({
              message: "部门添加成功",
              type: "success"
            });
            _this.name = "";
            _this.responsible = "";
          } else {
            _this.$message.error(data.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  },
  activated() {
   this.dataList();
  }
};
</script>

<style lang="less">
@import "employee.less";
</style>

